<template>
	<view class="content">
		<view class="logo">

		</view>
		<view class="timu-box" v-for="(item,index) in tiList" :key="index" v-if="(index+1) == tiNum">
			<view class="biao-box">
				<view class="biao">
					<u-count-down :time="time * 1000" format="ss" autoStart @finish="timeFinish" @change="timeChange">
						<view class="time">

							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.seconds }}</text>
							</view>
						</view>
					</u-count-down>
				</view>
			</view>
			<view :class="typeReturn(item.type)">

			</view>
			<view class="tiban">
				<text class="timutxt">{{item.timu}}</text>
			</view>

			<!-- 单选和判断用的 -->
			<view class="xuanxiang-box" v-for="(item1,index1) in xuanxiangArr(item.xuanxiang)"
				@click="xuanzhong(index1)" :class="current==index1?'active':''"
				v-if="item.type=='danxuan' || item.type=='panduan'">
				{{item1}}
			</view>
			<view class="queding" @click="tijiao(item.daan)" v-if="item.type=='danxuan' || item.type=='panduan'">

			</view>

			<!-- 多选用的 -->
			<view class="xuanxiang-box" v-for="(item1,index1) in duoxuanArr(item.xuanxiang)"
				@click="duoxuanzhong(item1,index1)" :class="duoxuanTemp[index1].checked?'active':''"
				v-if="item.type=='duoxuan'">
				{{item1.name}}
			</view>
			<view class="queding" @click="duoxuantijiao(item.daan)" v-if="item.type=='duoxuan'">

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: -1,
				time: 15,
				timeRun: 0,
				timeData: {},
				tiList: [],
				tiNum: '',
				jishiqi: '',
				duoxuanTemp: [{
					name: '1',
					checked: false
				}, {
					name: '2',
					checked: false
				}, {
					name: '3',
					checked: false
				}, {
					name: '4',
					checked: false
				}]
			}
		},
		onShow() {

			if (!uni.getStorageSync('USER')) {
				uni.navigateTo({
					url: '../index/index'
				})
			}
			this.tiList = uni.getStorageSync('TIKU')
			this.tiNum = uni.getStorageSync('TINUM')
			this.jishiqi = uni.getStorageSync('JISHIQI')
			if (this.tiNum >= 16) {
				uni.navigateTo({
					url: '../chengji/chengji'
				})
			}
		},
		methods: {
			timeFinish() {
				console.log('耗时', this.timeRun)
				//更新计时器
				this.current = -1
				this.duoxuanTemp = [{
					name: '1',
					checked: false
				}, {
					name: '2',
					checked: false
				}, {
					name: '3',
					checked: false
				}, {
					name: '4',
					checked: false
				}]
				let jishiqi = uni.getStorageSync('JISHIQI')
				uni.setStorageSync('JISHIQI', jishiqi += this.timeRun)
				this.timeRun = 0
				//改变下一题的题号
				this.tiNum += 1
				uni.setStorageSync('TINUM', this.tiNum)

				//保存到数据库
				uniCloud.callFunction({
					name: 'dati-save',
					data: {
						flag: uni.getStorageSync('USER').flag,
						id: uni.getStorageSync('USER')._id,
						zongfen: uni.getStorageSync('ZONGFEN'),
						shijian: uni.getStorageSync('JISHIQI'),
						tiNum: this.tiNum
					}
				}).then(res => {
					console.log('res', res)
				})

				if (this.tiNum >= 16) {
					uni.navigateTo({
						url: '../chengji/chengji'
					})
				}
			},
			timeChange(e) {
				this.timeData = e
				this.timeRun = 15 - e.seconds
				// console.log('耗时', this.timeRun)
			},
			typeReturn(e) {
				switch (e) {
					case 'danxuan':
						return 'timu-type-danxuan'
						break;
					case 'duoxuan':
						return 'timu-type-duoxuan'
						break;
					case 'panduan':
						return 'timu-type-panduan'
						break;
					default:
						break;
				}
			},
			xuanxiangArr(e) {
				let arr = e.split(' ')
				return arr
			},
			xuanzhong(index) {
				console.log(index)
				this.current = index
			},
			tijiao(daan) {
				if (daan == (this.current + 1)) {
					console.log('答对了')
					//答对加分 打错不变
					let zongfen = uni.getStorageSync('ZONGFEN')

					uni.setStorageSync('ZONGFEN', zongfen += 1)


				} else {
					console.log('答错了')
				}

				//更新计时器
				this.current = -1
				let jishiqi = uni.getStorageSync('JISHIQI')
				uni.setStorageSync('JISHIQI', jishiqi += this.timeRun)
				this.timeRun = 0
				//改变下一题的题号
				this.tiNum += 1
				uni.setStorageSync('TINUM', this.tiNum)


				//保存到数据库
				uniCloud.callFunction({
					name: 'dati-save',
					data: {
						flag: uni.getStorageSync('USER').flag,
						id: uni.getStorageSync('USER')._id,
						zongfen: uni.getStorageSync('ZONGFEN'),
						shijian: uni.getStorageSync('JISHIQI'),
						tiNum: this.tiNum
					}
				}).then(res => {
					console.log('res', res)
				})


				if (this.tiNum >= 16) {
					uni.navigateTo({
						url: '../chengji/chengji'
					})
				}
			},

			//多选重构
			duoxuanArr(e) {

				let arr = e.split(' ')

				let obj = []
				for (let item of arr) {
					obj.push({
						name: item,
						checked: false
					})
				}
				return obj
			},
			duoxuanzhong(item1, index1) {
				// this.duoxuanTemp[index1] = item1
				this.duoxuanTemp[index1].checked = !this.duoxuanTemp[index1].checked
				console.log(this.duoxuanTemp)
			},
			duoxuantijiao(daan) {
				// console.log('this.duoxuanTemp', this.duoxuanTemp)
				// console.log('多选标准答案', daan)
				let temp = []
				for (let item of this.duoxuanTemp) {
					if (item.checked) {
						temp.push(item.name)
					}
				}
				let daanarr = daan.split(' ').toString()
				let temp1 = temp.toString()
				console.log('temp1', temp1)
				console.log('daanarr', daanarr)
				if (temp1 == daanarr) {
					console.log('答对了')
					let zongfen = uni.getStorageSync('ZONGFEN')

					uni.setStorageSync('ZONGFEN', zongfen += 1)
				} else {
					console.log('答错了')

				}
				//更新计时器
				this.current = -1
				this.duoxuanTemp = [{
					name: '1',
					checked: false
				}, {
					name: '2',
					checked: false
				}, {
					name: '3',
					checked: false
				}, {
					name: '4',
					checked: false
				}]
				let jishiqi = uni.getStorageSync('JISHIQI')
				uni.setStorageSync('JISHIQI', jishiqi += this.timeRun)
				this.timeRun = 0
				//改变下一题的题号
				this.tiNum += 1
				uni.setStorageSync('TINUM', this.tiNum)

				//保存到数据库
				uniCloud.callFunction({
					name: 'dati-save',
					data: {
						flag: uni.getStorageSync('USER').flag,
						id: uni.getStorageSync('USER')._id,
						zongfen: uni.getStorageSync('ZONGFEN'),
						shijian: uni.getStorageSync('JISHIQI'),
						tiNum: this.tiNum
					}
				}).then(res => {
					console.log('res', res)
				})

				if (this.tiNum >= 16) {
					uni.navigateTo({
						url: '../chengji/chengji'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: url('@/static/bg.png') no-repeat center top;
		background-size: 100% 100%;
		// height: 1624rpx;
		background-attachment: fixed;
	}

	.time {
		@include flex;
		align-items: center;
		margin-top: 30rpx;
		margin-left: 8rpx;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			// background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #ff0000;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	.biao-box {
		width: 100%;
	}

	.biao {
		width: 100rpx;
		height: 96rpx;
		background: url('@/static/daojishi.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 54rpx;
		margin-left: 64rpx;
	}

	.timu-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.timu-type-danxuan {
		width: 238rpx;
		height: 80rpx;
		background: url('@/static/danxuan.png') no-repeat center center;
		background-size: 100% 100%;
	}

	.timu-type-duoxuan {
		width: 232rpx;
		height: 80rpx;
		background: url('@/static/duoxuan.png') no-repeat center center;
		background-size: 100% 100%;
	}

	.timu-type-panduan {
		width: 240rpx;
		height: 80rpx;
		background: url('@/static/panduan.png') no-repeat center center;
		background-size: 100% 100%;
	}

	.tiban {
		width: 506rpx;
		height: 124rpx;
		background: #fff;
		border: 1px solid #ec4d18;
		border-radius: 20rpx;
		margin-top: 58rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 70rpx;
		padding: 20rpx 30rpx;
	}

	.timutxt {
		font-size: 13px;
		color: #676767;
		line-height: 20px;
		// width: 80%;
	}

	.xuanxiang-box {
		width: 440rpx;
		height: 123rpx;
		padding: 0 30rpx;
		background: url('@/static/chushi-btn.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 36rpx;
		font-size: 13px;
	}

	.xuanxiang-box.active {
		width: 440rpx;
		height: 123rpx;
		padding: 0 30rpx;
		background: url('@/static/xuanzhong-btn.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-bottom: 36rpx;
		font-size: 13px;
	}

	.queding {
		width: 220rpx;
		height: 82rpx;
		background: url('@/static/tijiao-btn.png') no-repeat center center;
		background-size: 100% 100%;

	}
</style>
